<template>
  <view class="persional">
    <view class="navbar">
    </view>
    <view class="my">
      <view v-if="hiddenName" class="profile">
        <image src="http://122.114.92.39:9000/xingyue/d6921a28aa36c00c82e5e2ea98927bf6cdbdba3be4042c0af1624cb099b5e01d.png"></image>
        <text>{{hiddenName}}</text>
      </view>
      <view v-else class="login" @tap="login()">
        <image src="http://218.28.225.151:9000/xingyuepeizhen/avtor3.png"></image>
        <text class="logintext">立即登录</text>
        <view class="subtext">
          <text>登录享更多功能</text>
        </view>
      </view>
      <view class="integral" @click="wait">
        <image src="@/static/images/mine/integral.png"></image>
        <text>我的积分</text>
      </view>
      <view class="coupon" @click="wait">
        <image src="@/static/images/mine/coupon.png"></image>
        <text>我的券包</text>
      </view>
    </view>
    <view class="tool">
      <uni-section title="我的工具" type="line" padding titleFontSize="20px">
        <uni-grid :column="4" :highlight="false" :showBorder="false" @change="myBusiness">
          <uni-grid-item v-for="(item, index) in toolList" :index="index" :key="index">
            <view class="grid-item-box" style="background-color: #fff;">
              <image :src="item.pic"></image>
              <text class="text">{{item.name}}</text>
            </view>
          </uni-grid-item>
        </uni-grid>
      </uni-section>
    </view>
  </view>
</template>

<script setup>
  import {
    onLoad
  } from '@dcloudio/uni-app'
  import {
    ref
  } from 'vue';
  //从缓存中获取用户信息
  const baseInfo = ref({})
  const hiddenName = ref("")
  //判断用户是否需要登录
  onLoad(() => {
    baseInfo.value = uni.getStorageSync("baseInfo")
    console.log(baseInfo);
    //电话号码
    let nickname = baseInfo.value.nickname
    if (nickname) {
      hiddenName.value = hidePhone(nickname);
    }
  })


  function hidePhone(phone) {
    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
  }
  //我的工具数据
  const toolList = ref([""])
  toolList.value = [{
    name: "地址管理",
    pic: "../../static/images/mine/address.png"
  }, {
    name: "就诊人管理",
    pic: "../../static/images/mine/patient.png"
  }, {
    name: "我的投诉",
    pic: "../../static/images/mine/complaint.png"
  }, {
    name: "分享码",
    pic: "../../static/images/mine/share.png"
  }, {
    name: "我的收藏",
    pic: "../../static/images/mine/collect.png"
  }, {
    name: "成为陪诊师",
    pic: "../../static/images/mine/staff.png"
  }, {
    name: "陪诊师登录",
    pic: "../../static/images/mine/login.png"
  }]
  //
  function myBusiness(e) {
    if (e.detail.index == 0) {
      uni.navigateTo({
        url: "/pages/my/address/address"
      })
    } else if (e.detail.index == 5) {
      uni.navigateTo({
        url: "/pages/staff/create-staff/create-staff"
      })
    } else if (e.detail.index == 6) {
      //判断是否登录，然后判断用户是否是陪诊师，如果不是陪诊师则没有权限
      uni.navigateTo({
        url: "/pages/staff/staff-index/staff-index"
      })
    } else if (e.detail.index == 1) {
      uni.navigateTo({
        url: "/pages/paitent/paitent"
      })
    }
  }
  //跳转登录
  function login() {
    uni.navigateTo({
      url: "/pages/login/login"
    })
  }

  function wait() {
    uni.showToast({
      title: '功能暂未开放',
      icon: 'none',
      duration: 1000
    })
  }
</script>

<style lang="scss" scoped>
  .persional {
    background-color: $uni-bg-color-grey;

    .navbar {
      height: 490rpx;
      background-color: #2dbca3;
      border-radius: 15rpx;
      background-image: url(http://218.28.225.151:9000/xingyuepeizhen/my-background.png);
    }

    .my {

      //头像样式
      .profile {
        position: absolute;
        left: 24rpx;
        top: 200rpx;

        image {
          width: 148rpx;
          height: 148rpx;
          vertical-align: middle;
        }

        text {
          color: #fff;
          font-size: 40rpx;
          margin-left: 20rpx;
        }
      }

      //登录样式
      .login {
        position: absolute;
        left: 24rpx;
        top: 200rpx;

        image {
          width: 148rpx;
          height: 148rpx;
          vertical-align: middle;
        }

        .logintext {
          color: #fff;
          font-size: 40rpx;
          margin-left: 20rpx;
        }

        .subtext {
          position: absolute;
          left: 160rpx;
          top: 110rpx;
          color: #fff;
          font-size: 25rpx;
        }
      }

      .integral,
      .coupon {
        width: 190px;
        height: 60px;
        background-color: #fff;
        border-radius: 18rpx;
        position: absolute;
        text-align: center;
        padding-top: 60rpx;

        image {
          width: 70rpx;
          height: 70rpx;
          vertical-align: middle;
        }

        text {
          margin-left: 15rpx;
          font-size: 35rpx;
        }
      }

      .integral {
        left: 24rpx;
        top: 420rpx;
      }

      .coupon {
        right: 24rpx;
        top: 420rpx;
      }
    }
  }

  .tool {
    margin-top: 100rpx;

    .grid-item-box {
      text-align: center;
      margin-top: 30rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }

      text {
        display: block;
      }
    }
  }
</style>